<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="my-tool-bar" style="margin-bottom: 15px;">
                <Toolbar :items="['查询', '新增', '删除', '保存']" @add="addHandler" @import="importHandler"
                    @del="deleteHandler" @select="selectHandler" @export="exports" @excel="downloadHandler">
                </Toolbar>
            </div>
            <div class="search-form" v-if="headerShow">
                <a-row :gutter="16">
                    <a-col :span="4">
                        <a-form-item label="记录单号" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="流转卡号">
                            <a-select popup-container="html"  :loading="loading" :allowClear="true" @search="handleSearch"
                                v-model="pageData.dropDownData" :filter-option="false" allow-search @focus="focusSel">
                                <a-option v-for="item in pageData.clothList" :value="item['classify']">{{
                                    item['classify']
                                }}</a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="登记日期">
                            <a-date-picker  popup-container="html"  class="bacClass" v-model="pageData.dateStart" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="布号" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="成分" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="要求规格" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="4">
                        <a-form-item label="颜色" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="客户名称">
                            <a-select popup-container="html"  :loading="loading" :allowClear="true" @search="handleSearch"
                                v-model="pageData.dropDownData" :filter-option="false" allow-search @focus="focusSel">
                                <a-option v-for="item in pageData.clothList" :value="item['classify']">{{
                                    item['classify']
                                }}</a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="坯布规格" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="干布机号" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="染色机号" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="开幅方式" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="4">
                        <a-form-item label="坯定条件" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="开幅机号" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="开幅机号" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="成品温度" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="坯布条件" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="针架宽度" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="4">
                        <a-form-item label="坯布编号">
                            <a-select popup-container="html"  :loading="loading" :allowClear="true" @search="handleSearch"
                                v-model="pageData.dropDownData" :filter-option="false" allow-search @focus="focusSel">
                                <a-option v-for="item in pageData.clothList" :value="item['classify']">{{
                                    item['classify']
                                }}</a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="坯布批号">
                            <a-select popup-container="html"  :loading="loading" :allowClear="true" @search="handleSearch"
                                v-model="pageData.dropDownData" :filter-option="false" allow-search @focus="focusSel">
                                <a-option v-for="item in pageData.clothList" :value="item['classify']">{{
                                    item['classify']
                                }}</a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="坯定温度" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="成品机速" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="干布温度" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="坯布缩水" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="4">
                        <a-form-item label="下机规格" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="纱牌">
                            <a-select popup-container="html"  :loading="loading" :allowClear="true" @search="handleSearch"
                                v-model="pageData.dropDownData" :filter-option="false" allow-search @focus="focusSel">
                                <a-option v-for="item in pageData.clothList" :value="item['classify']">{{
                                    item['classify']
                                }}</a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="针时数" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="成品超喂" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="试样工艺流程">
                            <a-select popup-container="html"  :loading="loading" :allowClear="true" @search="handleSearch"
                                v-model="pageData.dropDownData" :filter-option="false" allow-search @focus="focusSel">
                                <a-option v-for="item in pageData.clothList" :value="item['classify']">{{
                                    item['classify']
                                }}</a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="成品斜度" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="4">
                        <a-form-item label="洗后克重" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="大货参考流程">
                            <a-select popup-container="html"  :loading="loading" :allowClear="true" @search="handleSearch"
                                v-model="pageData.dropDownData" :filter-option="false" allow-search @focus="focusSel">
                                <a-option v-for="item in pageData.clothList" :value="item['classify']">{{
                                    item['classify']
                                }}</a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="收费项目">
                            <a-select popup-container="html"  :loading="loading" :allowClear="true" @search="handleSearch"
                                v-model="pageData.dropDownData" :filter-option="false" allow-search @focus="focusSel">
                                <a-option v-for="item in pageData.clothList" :value="item['classify']">{{
                                    item['classify']
                                }}</a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="工艺单价" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="备注" field="greyCode" :disabled="pageData.isDetails">
                            <a-textarea class="bacClass" v-model="dataForm.remark" :max-length="400" allow-clear show-word-limit/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <!-- <a-form-item label="品名" field="greyCode" :disabled="pageData.isDetails">
                            <a-input v-model="dataForm.greyCode"></a-input>
                        </a-form-item> -->
                    </a-col>
                </a-row>
            </div>
        </template>
    </pageTabelLayout>
</template>

<script lang="ts">
import { post, get } from "@/api/http";
import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
} from "@/hooks/table";
import { localeText } from '@/api/aggridZw'
import { ref, reactive, onMounted, onActivated, onUnmounted } from "vue";
import Toolbar from "@/components/Toolbar.vue";
import { Form, Message, Modal, Pagination } from "@arco-design/web-vue";
import { FormInstance } from "@arco-design/web-vue/es/form";
import emitter from "@/hooks/useEventBus";
import validate from "@/hooks/useValidate";
import { baseURL } from '../../../../api/axios.config'
import axios from "axios";
import filedownload from 'js-file-download'

import PageTabelLayout from '@/components/pageTabelLayout.vue';
interface ClothSet {
    id: any;
    serialNumber: number | undefined,
    classify: string | undefined;
    deleteState: any
    remark: string | undefined;
    createName: string | undefined;
    createTime: string | undefined;
    updateName: string | undefined;
    updateTime: string | undefined;
    requireClassify: any,
    optionx: any,
    defaultx: any,
    units: any,
    requireClassifyID: any
}

export default {
    name: "EstablishDevelopmentSampleDemo",
    setup() {
        const headerShow = ref<boolean>(true)
        //查询
        const scrollbar = ref(true)

        function doRefresh() {

            pageData.pageLoading = true

            post({
                url: "pdm/RequireClassify/getPage",
                data: {
                    page: pagination.page,
                    size: pagination.pageSize,
                    deleteState: 0,
                    classify: pageData.dropDownData
                },
            })
                .then(({ data, code }: any) => {
                    if (code === 200) {

                        table.handleSuccess(data.list);
                        gridOption.value.setRowData(data.list)
                        total.value = data.total;

                    }
                })
                .catch(console.log).finally(() => {
                    pageData.pageLoading = false
                })
        }

        const { selectedRowKeys, onSelectionChange } = useRowSelection();
        const pagination = usePagination(doRefresh);
        const table = useTable();
        const rowKey = useRowKey("id");
        //检验表单是否含有中文的方法
        const hasChiese = validate.includeChinese;
        const tableColumns = useTableColumn([
            {
                title: "序号",
                key: "serialNumber",
                dataIndex: "serialNumber",
                width: 150
            },
            {
                title: "项目",
                key: "classify",
                dataIndex: "classify",
                width: 150
            },
            {
                title: "要求分类",
                key: "requireClassify",
                dataIndex: "requireClassify",
                width: 150
            },
            {
                title: "备注",
                key: "remark",
                dataIndex: "remark",
                width: 150
            },
            {
                title: "默认值信息",
                key: "id",
                dataIndex: "id",
                width: 150,
                slotName: 'act1',
            },
            {
                title: "创建人",
                key: "createName",
                dataIndex: "createName",
                width: 150
            },
            {
                title: "创建时间",
                key: "createTime",
                dataIndex: "createTime",
                width: 150
            },
            {
                title: "最后修改人",
                key: "updateName",
                dataIndex: "updateName",
                width: 150
            },
            {
                title: "最后修改时间",
                key: "updateTime",
                dataIndex: "updateTime",
                width: 150
            },

            {
                title: "操作",
                key: "id",
                dataIndex: "id",
                slotName: "act",
                width: 150, fixed: 'right'
            },
        ]);
        const tableColumns1 = useTableColumn([
            {
                title: "序号",
                key: "requireClassifyID",
                dataIndex: "requireClassifyID",
                width: 250
            },
            {
                title: "项目",
                key: "classify",
                dataIndex: "classify",
                width: 250
            },
            {
                title: "选项",
                key: "optionx",
                dataIndex: "optionx",
                width: 250
            },
            {
                title: "单位",
                key: "units",
                dataIndex: "units",
                width: 250
            },
            {
                title: "默认状态",
                key: "defaultx",
                dataIndex: "defaultx",
                slotName: "act3",
                width: 150,
                fixed: 'right'
            },
            {
                title: "备注",
                key: "remark",
                dataIndex: "remark",
                width: 150
            },
            {
                title: "创建人",
                key: "createName",
                dataIndex: "createName",
                width: 150
            },
            {
                title: "创建时间",
                key: "createTime",
                dataIndex: "createTime",
                width: 150
            },
            {
                title: "操作",
                key: "id",
                dataIndex: "id",
                slotName: "act4",
                width: 300,
                fixed: 'right'
            },

        ]);
        const scroll = {
            x: 2000,
            y: 200
        };
        const tablediv = ref(null)
        const pageData = reactive<{
            clothList: ClothSet[]
            showAdd: boolean,
            showAdd1: boolean,
            sideTitle: string,
            sideTitle1: string
            dropDownData: any
            pageLoading: boolean,
            theight: number,
            tablediv: any,
            rHeight: number | undefined,
        }>({
            clothList: [],
            sideTitle1: '新增默认值',
            showAdd: false,
            showAdd1: false,
            sideTitle: "新增项目分类",
            dropDownData: "",
            pageLoading: false,
            theight: 0,
            tablediv: null,
            rHeight: 0
        });
        //下拉框得到焦点
        const focusSel = () => {
            selCxAll({ classify: "" })
        }
        //下拉数据
        const options = ref<any>(pageData.clothList);
        const loading = ref(false);
        const handleSearch = (value: any) => {
            if (value) {
                const ob = { classify: value }
                loading.value = true;
                selCxAll(ob);
                options.value = pageData.clothList;
                loading.value = false;
            } else {
                options.value = []
            }
        };

        //下拉框查询
        function selCxAll(val: any) {
            post({
                url: "pdm/RequireClassify/getFieldValue",
                data: val
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    pageData.clothList = data;
                } else {
                    Message.error({
                        content: "查询失败！",
                        duration: 5000,
                    });
                }
            });
        }

        onMounted(() => {
            // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
            doRefresh();
            // selCxAll({});
            // 切换tap到本页面执行的方法
            emitter.on("EstablishDevelopmentSampleDemo", () => {
                // selCxAll({});
                doRefresh();
            });
            pageData2.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
            //弹出层的高
            if (pageData2.rHeight !== undefined) {
                pageData2.rHeight = pageData2.rHeight - 100;
            }
        });
        let cxbl = ""
        //查询
        const selectHandler = () => {
            pagination.page = 1
            // cxbl = pageData.dropDownData
            if (pageData.dropDownData !== '') {
                doRefresh();
            } else {
                doRefresh();
            }

        }
        const queryData = reactive({
            clothType: "",
        });
        const addHandler = () => {
            for (var key in dataForm) {
                if (key === "id") {
                    dataForm[key] = null;
                } else {
                    dataForm[key] = "";
                }

            }
            pageData.showAdd = true;
            pageData.sideTitle = "新增项目分类";
        };
        const addHandler1 = () => {
            for (var key in dataForm) {
                if (key === "id") {
                    dataForm[key] = null;
                } else {
                    dataForm[key] = "";
                }

            }
            pageData.showAdd1 = true;
            pageData.sideTitle1 = "新增默认值";
        };
        const dataForm = reactive<ClothSet>({
            id: null,
            serialNumber: 0,
            createTime: "",
            classify: "",
            remark: "",
            updateTime: "",
            updateName: "",
            createName: "",
            deleteState: 0,
            requireClassify: "",
            optionx: "",
            defaultx: "",
            units: "",
            requireClassifyID: ""

        });

        // 新增
        const formRef = ref<FormInstance>();
        const sideOk = () => {
            formRef.value?.validate().then((err) => {
                if (!err) {
                    if (pageData.sideTitle === "新增项目分类") {
                        post({
                            url: "pdm/RequireClassify/insert",
                            data: [dataForm],
                        }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();

                                pageData.showAdd = false;

                                Message.success({
                                    content: "新增成功",
                                    duration: 5000,
                                });
                                doRefresh();
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 5000,
                                });
                            }

                        });
                    } else {
                        post({
                            url: "pdm/RequireClassify/updateList",
                            data: dataForm,
                        }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();
                                pageData.showAdd = false;

                                Message.success({
                                    content: "修改成功",
                                    duration: 5000,
                                });
                                doRefresh();
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 5000,
                                });
                            }

                        });
                    }
                }
            });
        };
        const sideOk1 = () => {
            formRef.value?.validate().then((err) => {
                if (!err) {
                    if (pageData.sideTitle1 === "新增默认值") {
                        post({
                            url: "pdm/RequireClassifySon/insert",
                            data: [{

                                classify: keyList.shelveName,
                                requireClassifyID: keyList.shelveId,
                                optionx: dataForm.optionx,
                                units: dataForm.units,
                                remark: dataForm.remark
                            }]

                        }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();

                                pageData.showAdd1 = false;

                                Message.success({
                                    content: "新增成功",
                                    duration: 5000,
                                });
                                doRefresh1();
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 5000,
                                });
                            }

                        });
                    } else {
                        post({
                            url: "pdm/RequireClassifySon/update",
                            data: [dataForm],
                        }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();
                                pageData.showAdd1 = false;

                                Message.success({
                                    content: "修改成功",
                                    duration: 5000,
                                });
                                doRefresh1();
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 5000,
                                });
                            }

                        });
                    }
                }
            });
        };
        const deleteHandler = () => {
            if (gridOption.value.getSelectedRows().length === 0) {
                Message.error('请先勾选')
                return;
            }
            Modal.confirm({
                title: "系统提示",
                content: "确认删除选中的数据?",
                onOk() {
                    post({
                        url: "pdm/RequireClassify/delete",
                        data: gridOption.value.getSelectedRows().map((o: any) => { return o.id })
                    }).then(({ code, data, message }: any) => {
                        if (code === 200) {
                            Message.success({
                                content: "删除成功",
                                duration: 5000,
                            });

                            pagination.page = 1
                            doRefresh();

                        } else {
                            Message.error({
                                content: '删除失败',
                                duration: 5000,
                            });
                        }

                    });
                },
            });
        };
        const deleteHandler1 = () => {
            if (gridOption1.value.getSelectedRows().length === 0) {
                Message.error('请先勾选')
                return;
            }
            Modal.confirm({
                title: "系统提示",
                content: "确认删除选中的数据?",
                onOk() {
                    post({
                        url: "pdm/RequireClassifySon/delete",
                        data: gridOption1.value.getSelectedRows().map((o: any) => { return o.id })
                    }).then(({ code, data, message }: any) => {
                        if (code === 200) {
                            Message.success({
                                content: "删除成功",
                                duration: 5000,
                            });

                            pagination.page = 1
                            doRefresh1();

                        } else {
                            Message.error({
                                content: '删除失败',
                                duration: 5000,
                            });
                        }

                    });
                },
            });
        };
        const editHandler = (record: ClothSet) => {
            for (var key in record) {
                dataForm[key] = record[key]
            }
            pageData.sideTitle = '修改项目分类'
            pageData.showAdd = true
        };
        const editHandler2 = (record: ClothSet) => {
            for (var key in record) {
                dataForm[key] = record[key]
            }
            pageData.sideTitle1 = '修改默认值'
            pageData.showAdd1 = true
        };


        //导出
        const exports = () => {
            if (selectedRowKeys.value.length === 0) {
                Message.error('请先勾选')
                return
            } else {
                //将表头拼接出来
                let head = "<th>编号</th><th>名称</th><th>备注</th><th>创建人</th><th>创建时间</th><th>最后修改人</th><th>最后修改时间</th>"
                //拿到当前表格数据与勾选的行做筛选

                let nowRow = table.dataList.filter(function (o) {
                    return selectedRowKeys.value.indexOf(o["id"]) !== -1;
                })
                let body = "";
                nowRow.forEach(function (o) {
                    body += "<tr><td>" + o["merceryCode"] + "</td>";
                    body += "<td>" + o["merceryName"] + "</td>";
                    body += "<td>" + o["remark"] + "</td>";
                    body += "<td>" + o["createName"] + "</td>";
                    body += "<td>" + o["createTime"] + "</td>";
                    body += "<td>" + o["updateName"] + "</td>";
                    body += "<td>" + o["updateTime"] + "</td>";
                    body += "</tr>";
                })
                tableToXlsx(head, '布类资料', body)
                console.log(table)
            }
        }

        function tableToXlsx(head: any, filename: any, body: any) {
            const uri = 'data:application/vnd.ms-excel;base64,',
                template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`;

            const a = document.createElement('a');
            a.href = uri + window.btoa(unescape(encodeURIComponent(template)));
            a.download = filename;
            a.click();
            document.removeChild(a);
        }

        //模板下载
        const downloadHandler = () => {
            axios.get(baseURL + '/product/mercery/uploadMerceryModel', {
                responseType: 'blob',
                headers: {
                    token: sessionStorage.getItem('USER-TOKEN-KEY')
                }
            }).then((res) => {
                if (res.status === 200) {
                    filedownload(res.data, '布类资料.xlsx')
                }
            })
        }
        //导入
        const importHandler = () => {

            const inputEle: HTMLInputElement = document.createElement('input')
            inputEle.type = 'file'
            inputEle.id = 'fileUploadExcel'
            inputEle.accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
            inputEle.addEventListener('change', (e) => {
                const formData = new FormData()
                if (inputEle.files !== null) {
                    formData.append('file', inputEle.files[0] || '')
                } else {
                    Message.warning('未选择文件！');
                    return
                }
                pageData.pageLoading = true
                axios.post(baseURL + '/product/mercery/analyseMerceryModel', formData, {
                    headers: {
                        "Content-Type": 'multipart/form-data',
                        "token": sessionStorage.getItem('USER-TOKEN-KEY')
                    },
                }).then((result) => {
                    if (result.data['code'] === 200) {
                        Message.success('导入成功')
                    } else {
                        Message.error(result.data.message)
                    }

                }).finally(() => {
                    pageData.pageLoading = false
                    doRefresh()
                })
            })
            inputEle.click()
        }
        const pageData2 = reactive<{
            showAdd: boolean;
            rHeight: any;
        }>({
            showAdd: false,
            rHeight: 0
        });
        interface keyscwType {
            "firm": any,
            "warehouseId": any,
            "warehouseName": any,
            "id": any,
            "name": any,
            "shelveName": any
        }
        let keyscw: keyscwType = {
            "firm": "",
            "warehouseId": "",
            "warehouseName": "",
            "id": "",
            "name": "",
            "shelveName": ''
        }
        // 定义从主表获取过来的数据
        let keyList = {
            shelveId: 0,
            shelveName: '',
            sheID: ''
        }
        // 子表查询渲染
        function doRefresh1() {

            pageData.pageLoading = true

            post({
                url: "pdm/RequireClassify/getListId",
                data: {
                    id: keyList.shelveId,
                    // classify: keyList.shelveName,
                    // deleteState:0,

                },
            })
                .then(({ data, code }: any) => {
                    if (code === 200) {

                        table.handleSuccess(data.list);
                        gridOption1.value.setRowData(data.list)
                        total.value = data.total;

                    }
                })
                .catch(console.log).finally(() => {
                    pageData.pageLoading = false
                })
        }
        // 点击按钮获取主表数据
        const editHandler1 = (key: any) => {
            keyList.shelveId = Number(key.id)
            keyList.shelveName = key.classify
            // keyList.sheID = dataForm.defaultx
            // opCwdata(keyList)
            // keyscw = key
            pageData2.showAdd = true
            doRefresh1()
            console.log(checkeded);

        }
        const editHandler3 = (key: any) => {
            keyscw = key
            open1(key)
        }

        function open1(key: any) {
            console.log(key);

            post({
                url: "pdm/RequireClassifySon/updateDefaultx",
                data: [{
                    id: key.id,
                    requireClassifyID: key.requireClassifyID,
                    defaultx: key.defaultx,

                }],
            })
                .then(({ data, code }: any) => {
                    if (code === 200) {
                        doRefresh1()
                    }
                })
            // .catch(console.log).finally(() => {
            //     pageData.pageLoading = false
            // })
        }
        let lengsDs: number = 0
        // 表格准备事件
        const gridOption = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            // flex: 1
        }
        let tc: any[] = tableColumns.map((o) => {

            let obj = {
                headerName: o.title,
                field: o.key,
                pinned: o['fixed']
            }
            if (o.slotName === 'act') {
                obj['resizable'] = false
                obj['filter'] = false
                obj['sortable'] = false
                obj["lockPosition"] = "right"

                obj['cellRenderer'] = {
                    template: `<a-tag color="#ff7d00" @click="a" class="gesture">修改</a-tag>`,
                    setup(props: any) {
                        const a = () => {
                            editHandler(props.params.data)
                        }
                        return {
                            a
                        }
                    }

                }
            }
            if (o.slotName === 'act1') {
                obj['resizable'] = false
                obj['filter'] = false
                obj['sortable'] = false
                // obj["lockPosition"] = "right"

                obj['cellRenderer'] = {
                    template: `<a-tag color="#41b349" @click="a" class="gesture">默认值</a-tag>`,
                    setup(props: any) {
                        const a = () => {
                            editHandler1(props.params.data)
                        }
                        return {
                            a
                        }
                    }

                }
            }

            return obj
        })
        // 表格准备事件
        const gridOption1 = ref()
        const gridReady1 = (params: any) => {
            gridOption1.value = params.api
        }
        const defaultColDef1 = {
            sortable: true,
            resizable: true,
            filter: true,
            // flex: 1
        }
        let dc: any[] = tableColumns1.map((o) => {

            let obj = {
                headerName: o.title,
                field: o.key,
                pinned: o['fixed']
            }
            if (o.slotName === 'act4') {
                obj['resizable'] = false
                obj['filter'] = false
                obj['sortable'] = false
                obj['width'] = 300
                // obj["lockPosition"] = "right"

                obj['cellRenderer'] = {
                    template: `<a-space>
                    <a-tag color="#ff7d00" @click="b">修改</a-tag></a-space>`,
                    setup(props: any) {
                        const b = () => {
                            editHandler2(props.params.data)
                        }
                        return {
                            b
                        }
                    }

                }
            }
            if (o.slotName === 'act3') {
                obj['resizable'] = false
                obj['filter'] = false
                obj['sortable'] = false
                obj['width'] = 250
                // obj["lockPosition"] = "right"

                obj['cellRenderer'] = {
                    template: `<a-space>
                    <a-checkbox @click="b" :default-checked="checkeded"></a-checkbox></a-space>`,
                    setup(props: any) {
                        const b = () => {
                            editHandler3(props.params.data)
                        }
                        return {
                            b
                        }
                    }

                }
            }
            return obj
        })
        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        tc = a.concat(tc)
        dc = a.concat(dc)
        const total = ref(10);
        const page = ref(1);
        const size = ref(10);
        function PageSize(val: any) {
            pagination.page = val
            doRefresh();
        }
        function change1(val: any) {
            pagination.pageSize = val
            doRefresh();
        }
        // 子表关闭
        const sideNo1 = () => {
            pageData2.showAdd = false
            doRefresh()
        }
        const checkeded = ref<boolean>()
        const localeText1: any = ref(localeText)
        return {
            localeText1,
            checkeded,
            gridReady1,
            defaultColDef1,
            dc,
            tableColumns1,
            sideNo1,
            PageSize,
            change1,
            total,
            tc,
            defaultColDef,
            gridReady,
            scroll,
            scrollbar,
            tablediv,
            downloadHandler,
            importHandler,
            hasChiese,
            deleteHandler,
            sideOk,
            sideOk1,
            formRef,
            dataForm,
            addHandler,
            addHandler1,
            selectedRowKeys,
            pagination,
            tableColumns,
            table,
            rowKey,
            pageData,
            queryData,
            editHandler,
            editHandler2,
            editHandler3,
            selectHandler,
            options,
            loading,
            handleSearch,
            exports,
            focusSel,
            headerShow,
            pageData2,
            deleteHandler1,
            doRefresh1,
        };
    },
    components: { Toolbar, PageTabelLayout },
};
</script>
<style scoped lang="less">
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
</style>
